CSS-i vaateüleminekud: sujuvate ja kaasahaaravate navigeerimiskogemuste loomine

Pidevalt arenevas veebiarenduse maastikul on kasutajakogemus esmatähtis. Positiivse kasutajakogemuse võtmeelement on sujuv ja intuitiivne navigeerimine. Möödas on ajad, mil lehtede laadimine oli järsk ja häiriv; kasutajad ootavad nüüd sujuvaid üleminekuid, mis juhatavad neid vaevata läbi veebisaidi. CSS-i vaateüleminekud, võimas ja suhteliselt uus tehnoloogia, pakub võimalust just selle saavutamiseks.

Mis on CSS-i vaateüleminekud?

CSS-i vaateüleminekud pakuvad mehhanismi visuaalse ülemineku animeerimiseks veebisaidi kahe erineva oleku, tavaliselt erinevate lehtede või jaotiste vahel. Selle asemel, et ühest vaatest teise järsult hüpata, loovad vaateüleminekud sujuva, animeeritud voo, mis tundub loomulikum ja kaasahaaravam. See tulemusena on kasutajakogemus lihvitum ja professionaalsem.

Sisuliselt teeb brauser hetktõmmised vanast ja uuest olekust, tuvastades ühised elemendid ja animeerides nende liikumist, suurust ja välimust. See loob järjepidevuse illusiooni ja aitab kasutajatel säilitada kontekstitunnetust saidil navigeerimisel.

CSS-i vaateüleminekute kasutamise eelised

• Parem kasutajakogemus: Sujuvad üleminekud muudavad navigeerimise loomulikumaks ja vähem häirivaks.
• Suurem kaasatus: Kaasahaaravad animatsioonid püüavad kasutaja tähelepanu ja muudavad sirvimiskogemuse nauditavamaks.
• Kontekstuaalne teadlikkus: Üleminekud aitavad kasutajatel mõista, kuidas erinevad lehed või jaotised on omavahel seotud.
• Tajutav jõudluse paranemine: Isegi kui tegelik laadimisaeg jääb samaks, võivad sujuvad üleminekud muuta veebisaidi kiiremaks ja reageerimisvõimelisemaks.
• Modernne ja lihvitud disain: Vaateüleminekud aitavad kaasa modernsema ja keerukama veebisaidi esteetikale.

CSS-i vaateüleminekute põhiline rakendamine

Lihtsaim viis CSS-i vaateüleminekute rakendamiseks on kasutada sisseehitatud brauseri funktsionaalsust, mis käivitub samast päritolust navigeerimisel. Kõige elementaarsemate üleminekute jaoks pole JavaScript rangelt vajalik.

1. Vaateüleminekute lubamine

Samast päritolust navigeerimiste jaoks vaateüleminekute lubamiseks peate käivitama brauseri navigeerimise (nt lingi klõps) ja tagama, et brauser toetab vaateüleminekuid. 2023. aasta lõpu / 2024. aasta alguse seisuga on brauserite tugi suuremates brauserites (Chrome, Edge, Firefox) hea, kuid vanemate brauserite jaoks võib olla vaja polüfille või tingimuslikku loogikat.

2. Põhiline HTML-struktuur

Vaatleme kahte lihtsat HTML-lehte, `index.html` ja `about.html`:

            
<!-- index.html -->
<a href="about.html">Mine lehele Teave</a>

            

              
                Copy
              
            
          

            
<!-- about.html -->
<a href="index.html">Tagasi avalehele</a>

            

              
                Copy
              
            
          

Brauseri toe olemasolul käivitavad need lingid automaatselt põhilise rist-hajutusega vaateülemineku.

Täiustatud tehnikad: vaateüleminekute kohandamine JavaScriptiga

Kuigi brauseri vaikimisi käitumine pakub lihtsat rist-hajutust, peitub vaateüleminekute tõeline võimsus kohandamises. See saavutatakse peamiselt JavaScripti abil.

1. `document.startViewTransition()`

Meetod `document.startViewTransition()` on võti kohandatud vaateüleminekute algatamiseks ja kontrollimiseks. See võtab argumendina tagasikutsefunktsiooni, mis täidetakse ülemineku alguses.

            
const transitionLink = document.querySelector('#transition-link');

transitionLink.addEventListener('click', (event) => {
  event.preventDefault(); // Väldib lingi vaikimisi käitumist
  const url = transitionLink.href;

  document.startViewTransition(() => {
    // Värskendab DOM-i uue sisuga
    window.location.href = url; // Navigeerib uuele URL-ile
  });
});

            

              
                Copy
              
            
          

See näide väldib lingi vaikimisi käitumist ja kasutab seejärel `startViewTransition`-i ülemineku käivitamiseks enne uuele URL-ile navigeerimist. Tagasikutse värskendab DOM-i (antud juhul navigeerides, kuid see võib hõlmata sisu asendamist ilma täieliku lehe uuesti laadimiseta).

2. Vaateülemineku elutsükli mõistmine

`document.startViewTransition()` tagastab `ViewTransition` objekti erinevate lubadustega, mis esindavad ülemineku erinevaid etappe:

• `ready`: Lahendub, kui pseudo-elemendi hetktõmmis on loodud ja üleminek on valmis alustamiseks.
• `updateCallbackDone`: Lahendub pärast seda, kui `startViewTransition()`-ile edastatud tagasikutsefunktsioon on lõpule viidud. See on aeg DOM-i värskendamiseks.
• `finished`: Lahendub, kui animatsioon on lõppenud ja uus vaade on täielikult nähtav.
• `skipped`: Lahendub, kui üleminek jäetakse vahele (nt brauseri piirangute või kasutajaeelistuste tõttu).

Neid lubadusi saate kasutada keerukamate animatsioonide ja interaktsioonide korraldamiseks ülemineku ajal.

3. Nimetatud vaateüleminekud `view-transition-name`-iga

CSS-i omadus `view-transition-name` on jagatud elemendi üleminekute loomisel fundamentaalne. See võimaldab teil tuvastada elemente, mis peaksid vana ja uue vaate vahel animeeruma. Elemente, millel on sama `view-transition-name`, käsitletakse ülemineku ajal sama elemendina.

Näide:

Oletame, et teil on toote pilt, mida soovite sujuvalt üle viia tootenimekirja lehe ja toote detaililehe vahel.

            
<!-- Tootenimekirja leht -->
<a href="product-detail.html">
  <img src="product.jpg" alt="Toote pilt" style="view-transition-name: product-image;">
</a>

<!-- Toote detailileht -->
<img src="product.jpg" alt="Toote pilt" style="view-transition-name: product-image;">

            

              
                Copy
              
            
          

Andes mõlemale pildile sama `view-transition-name`, animeerib brauser automaatselt pildi asukohta ja suurust ülemineku ajal.

4. Vaateüleminekute stiilimine CSS-iga

CSS-i pseudo-elemendid pakuvad granulaarset kontrolli vaateülemineku välimuse üle:

• `::view-transition`: Esindab kogu vaateülemineku animatsiooni.
• `::view-transition-group(*)`: Esindab elementide rühma, mis lähevad koos üle ja on identifitseeritud `view-transition-name`-iga. `*` on metamärk, mille saab asendada konkreetse nimega.
• `::view-transition-image-pair(*)`: Esindab ülemineva elemendi pildipaari (vana ja uus).
• `::view-transition-old(*)`: Esindab vana pilti ülemineku ajal.
• `::view-transition-new(*)`: Esindab uut pilti ülemineku ajal.

Neid pseudo-elemente saate kasutada animatsiooni, läbipaistvuse, teisenduste ja muude ülemineku visuaalsete omaduste kohandamiseks.

Näide: Animatsiooni kohandamine

            
::view-transition-old(product-image), /* Kaduv pilt */
::view-transition-new(product-image) { /* Ilmuv pilt */
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(product-image) {
  animation-name: fade-out;
}

::view-transition-new(product-image) {
  animation-name: fade-in;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

            

              
                Copy
              
            
          

See näide rakendab toote pildile sisse- ja väljahajumise animatsiooni ülemineku ajal, andes sellele sujuvama välimuse.

5. Näide: üleminek loendi- ja detailvaate vahel

See näide illustreerib levinud kasutusjuhtu: üleminekut esemete loendi ja valitud eseme detailvaate vahel. See nõuab Javascripti, et vältida täielikku lehe uuesti laadimist.

            
<!-- Loendivaade -->
<ul id="item-list">
  <li><a href="#item1" data-item-id="item1" class="item-link"><img src="item1.jpg" style="view-transition-name: item1;">Ese 1</a></li>
  <li><a href="#item2" data-item-id="item2" class="item-link"><img src="item2.jpg" style="view-transition-name: item2;">Ese 2</a></li>
</ul>

<!-- Detailvaade (algselt peidetud) -->
<div id="detail-view" style="display: none;">
  <img id="detail-image" src="" style="view-transition-name: item1;">
  <h2 id="detail-title"></h2>
  <p id="detail-description"></p>
  <button id="back-button">Tagasi loendisse</button>
</div>

            

              
                Copy
              
            
          

            
const itemList = document.getElementById('item-list');
const detailView = document.getElementById('detail-view');
const detailImage = document.getElementById('detail-image');
const detailTitle = document.getElementById('detail-title');
const detailDescription = document.getElementById('detail-description');
const backButton = document.getElementById('back-button');

itemList.addEventListener('click', (event) => {
  if (event.target.classList.contains('item-link')) {
    event.preventDefault();
    const itemId = event.target.dataset.itemId;

    document.startViewTransition(() => {
      // Värskendab detailvaadet valitud elemendi andmetega
      detailImage.src = `${itemId}.jpg`;
      detailTitle.textContent = `Ese ${itemId.slice(4)}`; // Eemaldab eesliite 'item'
      detailDescription.textContent = `Kirjeldus esemele ${itemId}`; // Asenda tegelike andmetega

      // Veenduge, et view-transition-name on õige.
      detailImage.style.viewTransitionName = itemId; //Otsustav rida
      // Peidab loendivaate ja kuvab detailvaate
      itemList.style.display = 'none';
      detailView.style.display = 'block';
    });
  }
});

backButton.addEventListener('click', () => {
  document.startViewTransition(() => {
    // Peidab detailvaate ja kuvab loendivaate
    itemList.style.display = 'block';
    detailView.style.display = 'none';
  });
});


            

              
                Copy
              
            
          

Selles näites käivitab loendi elemendil klõpsamine vaateülemineku. JavaScript värskendab dünaamiliselt detailvaate sisu valitud elemendiga seotud andmetega. Oluline osa on õige `view-transition-name`-i dünaamiline määramine detailipildile enne selle nähtavaks tegemist, kasutades Javascripti vastavalt sellele, millisele elemendile klõpsati. Kui klõpsatakse tagasi-nupule, algatatakse uus vaateüleminek, mis viib kasutaja tagasi loendivaatesse.

6. Asünkroonsed operatsioonid ja vaateüleminekud

Asünkroonsete operatsioonidega (nt andmete toomine API-st) tegelemisel on oluline tagada, et vaateüleminek algaks alles pärast andmete laadimist.

            
async function loadData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

async function transitionToDetail(itemId) {
  document.startViewTransition(async () => {
    const data = await loadData(`/api/items/${itemId}`);

    // Värskendab detailvaadet hangitud andmetega
    detailImage.src = data.imageUrl;
    detailTitle.textContent = data.title;
    detailDescription.textContent = data.description;

    // Värskendab vaateülemineku nime
    detailImage.style.viewTransitionName = itemId;

    itemList.style.display = 'none';
    detailView.style.display = 'block';
  });
}

            

              
                Copy
              
            
          

Selles näites kasutab funktsioon `transitionToDetail` `async/await`-i, et tagada andmete laadimine enne DOM-i värskendamist ja vaateülemineku alustamist. See takistab ülemineku enneaegset algust ja ebaõige või mittetäieliku sisu kuvamist.

Kaalutlused ja parimad tavad

• Jõudlus: Kuigi vaateüleminekud parandavad kasutajakogemust, on oluline olla teadlik jõudlusest. Keerukad animatsioonid võivad olla ressursimahukad, seega optimeerige oma koodi ja varasid vastavalt. Kaaluge `will-change` omaduse ettevaatlikku kasutamist, et vihjata brauserile, millised omadused tõenäoliselt muutuvad, parandades animatsiooni jõudlust.
• Juurdepääsetavus: Veenduge, et teie vaateüleminekud on juurdepääsetavad puuetega kasutajatele. Pakkuge alternatiivseid viise saidil navigeerimiseks kasutajatele, kes ei pruugi animatsioone tajuda või nendega suhelda. Kaaluge `prefers-reduced-motion` meediapäringu kasutamist üleminekute keelamiseks või lihtsustamiseks kasutajatele, kes on väljendanud eelistust vähendatud liikumise suhtes.
• Brauseri ühilduvus: Kontrollige brauseri ühilduvust enne vaateüleminekute rakendamist. Kuna tegemist on suhteliselt uue tehnoloogiaga, ei pruugi kõik brauserid seda toetada. Kasutage funktsioonide tuvastamist ja pakkuge vanemate brauserite jaoks varuvariante. Mõne brauseri jaoks on saadaval polüfillid, kuid need ei pruugi täiuslikult jäljendada natiivset käitumist.
• Hoidke see lihtsana: Kuigi on ahvatlev luua keerukaid animatsioone, on sageli parim hoida vaateüleminekud lihtsad ja peened. Liiga keerulised üleminekud võivad olla häirivad ja negatiivselt mõjutada kasutajakogemust. Keskenduge selgusele ja kontekstile, mitte efektitsemisele.
• Tähendusrikkad üleminekud: Veenduge, et vaateüleminekud oleksid tähendusrikkad ja täidaksid eesmärki. Need peaksid aitama kasutajatel mõista seost saidi erinevate lehtede või jaotiste vahel, mitte olema lihtsalt dekoratiivsed elemendid.
• Testimine: Testige oma vaateüleminekuid põhjalikult erinevates seadmetes ja brauserites, et tagada nende ootuspärane toimimine. Pöörake tähelepanu jõudlusele ja juurdepääsetavusele. Kasutage brauseri arendaja tööriistu animatsiooni jõudluse profileerimiseks ja kitsaskohtade tuvastamiseks.

Globaalsed näited ja kasutusjuhud

CSS-i vaateüleminekuid saab rakendada erinevates kontekstides, et parandada kasutajakogemust globaalselt:

• E-kaubandus: Üleminek tootenimekirja ja detaililehtede vahel, esemete lisamine ostukorvi. Globaalsele publikule tagage, et tootepildid ja kirjeldused oleksid lokaliseeritud.
• Uudised ja meedia: Animeerimine artiklite eelvaadete ja täisartiklite vahel, navigeerimine veebisaidi jaotiste vahel. Kohandage disaini vastavalt erinevatele kultuurilistele eelistustele teabe kuvamisel.
• Reisimine ja turism: Sujuv üleminek sihtkohtade vahel, hotellide või vaatamisväärsuste detailide kuvamine. Pakkuge lokaliseeritud sisu ja mitme valuuta valikuid.
• Portfoolio veebisaidid: Kaasahaaravate üleminekute loomine projektide vahel, oskuste ja kogemuste esitlemine. Tõlkige portfoolio sisu mitmesse keelde laiema haarde saavutamiseks.
• Üheleheküljelised rakendused (SPA): Sujuva navigeerimise pakkumine SPA-s ilma täielike lehtede uuesti laadimisteta. Optimeerige jõudlust erinevates võrgutingimustes ja globaalselt kasutatavates seadmetes.
• Dokumentatsiooni saidid: Võimaldab kasutajatel kiiresti teemade vahel hüpata ja fookust säilitada.

Kokkuvõte

CSS-i vaateüleminekud pakuvad võimsat viisi sujuvate ja kaasahaaravate navigeerimiskogemuste loomiseks veebis. Mõistes põhiprintsiipe ja täiustatud tehnikaid, saavad arendajad luua visuaalselt köitvaid ja intuitiivseid veebisaite, mis suurendavad kasutajate rahulolu. Kuna brauserite tugi jätkuvalt kasvab, on vaateüleminekud valmis saama oluliseks tööriistaks kaasaegse veebiarendaja tööriistakastis.

Võtke omaks sujuvate üleminekute jõud ja tõstke oma veebisaidi kasutajakogemus uutesse kõrgustesse. Rakendades CSS-i vaateüleminekuid strateegiliselt ja läbimõeldult, saate luua veebisaite, mis pole mitte ainult visuaalselt köitvad, vaid ka intuitiivsed, juurdepääsetavad ja jõudsad, olenemata kasutaja asukohast või seadmest.

Ressursid

• MDN Web Docs: View Transitions API
• web.dev: Sujuvad ja lihtsad üleminekud View Transitions API-ga